<template>
    <div>
        <el-form :model="loggin"
            status-icon
            :rules="logginYZ"
            ref="loggin"
            class="mar_top">
            <el-form-item prop="phone">
                <el-col :span="24">
                    <el-input placeholder="请输入手机号码"
                        v-model="loggin.phone"
                        maxlength="11">
                        <i slot="prefix"
                            class="el-input__icon fa fa-user-o"></i>
                    </el-input>
                </el-col>
            </el-form-item>
            <el-form-item prop="yzm">
                <el-col>
                    <el-col :span="24">
                        <el-col :span="13">
                            <el-input placeholder="请输入短信验证码"
                                maxlength="4"
                                v-model="loggin.yzm">
                                <i slot="prefix"
                                    class="el-input__icon fa fa-user-o"></i>
                            </el-input>
                        </el-col>
                        <el-col :span="1"
                            style="height:2.5rem;"></el-col>
                        <el-col :span="10"
                            class="tr">
                            <el-button :loading="$store.state.isLoading"
                                @click="sendcode()"
                                :disabled="!this.canClick">{{this.content}}</el-button>
                        </el-col>
                    </el-col>
                </el-col>
            </el-form-item>
            <el-form-item class="tl">
                <el-col :span="24">
                    <el-checkbox v-model="isLogin">
                        勾选代表同意
                        <a href="#"
                            class="sizeColor_lan">【授权使用协议】</a>
                    </el-checkbox>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col :span="24">
                    <el-button :loading="$store.state.isLoading"
                        class="btn_login"
                        @click.prevent="sublogin('loggin')"
                        v-loading="load"
                        element-loading-text="登录中…">登录</el-button>
                </el-col>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
// import PhoneQuhao from "@/components/phoneQuhao/PhoneQuhao";
import Cookies from "js-cookie";
export default {
    name: "passLogin",
    components: {
        // PhoneQuhao
    },
    data () {
        var ex = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
        var checkUser = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("手机号不能为空"));
            } else {
                //  setTimeout(() => {
                if (!this.$fnc.regexp(ex, value)) {
                    callback(new Error("手机号非法"));
                } else {
                    callback();
                }
                // }, 1000)
            }
        };
        return {
            isLogin: true,
            load: false,
            loggin: {
                phone: "",
                yzm: "",
                unicode: ""
            },
            logginYZ: {
                phone: [{ validator: checkUser, trigger: "blur" }],
                yzm: [
                    { required: true, message: "验证码不能为空", trigger: "blur" },
                    { min: 4, max: 4, message: "请输入4位验证码", trigger: "blur" }
                ]
            },
            content: "发送验证码",
            totalTime: 60,
            canClick: true
        };
    },
    methods: {
        sendcode () {
            var data = {};
            data["tel"] = this.loggin.phone;
            this.$api.login.sendcode(data).then(res => {
                if (res.data.code == 200) {
                    this.loggin.unicode = res.data.result;
                    this.countDown(); //倒计时
                } else {
                    this.$swal("操作失败！", "出错啦！", "success");
                }
            });
        },
        countDown () {
            if (!this.canClick) return; //防重复点击
            this.canClick = false;
            let clock = window.setInterval(() => {
                this.totalTime--;
                this.content = this.totalTime + "s后重新发送";
                if (this.totalTime < 0) {
                    //当倒计时小于0时清除定时器
                    window.clearInterval(clock);
                    this.content = "发送验证码";
                    this.totalTime = 60;
                    this.canClick = true; //这里重新开启
                }
            }, 1000);
        },

        sublogin (formName) {
            this.$refs[formName].validate(valid => {
                if (!this.isLogin) {
                    this.$fnc.alertError("登录失败", "请授权使用协议");
                    return false;
                }
                if (valid) {
                    var data = {};
                    data["tel"] = this.loggin.phone;
                    data["code"] = this.loggin.yzm;
                    data["unicode"] = this.loggin.unicode;
                    this.$api.login.phonelogin(data).then(res => {
                        if (res.data.code == 200) {
                            localStorage.setItem("adminuid", res.data.result.uid);
                            localStorage.setItem("admin_key", res.data.result.key);
                            Cookies.set("adminuid", res.data.result.uid, { expires: 30 });
                            Cookies.set("admin_key", res.data.result.key, { expires: 30 });
                            this.$store.commit("setAdminname", res.data.result.username ||'');
                            if (res.data.result.first_menu) {
                                localStorage.setItem(
                                    "first_menu",
                                    res.data.result.first_menu || ""
                                );
                            }
                            if (
                                this.$route.query.redirect &&
                                this.$route.query.redirect != "/login"
                            ) {
                                let redirect = this.$route.query.redirect;
                                this.$router.push(redirect);
                                this.$store.commit("setTzUrl", redirect);
                            } else {
                                if (res.data.result.first_menu) {
                                    this.$router.push(res.data.result.first_menu);
                                } else {
                                    this.$router.push("/index");
                                }
                            }
                        } else {
                            this.$fnc.alertError(res.data.code_desc, res.data.result);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.row {
    height: 42px;
    line-height: 42px;
    border: 1px solid #e3e7ed;
    position: relative;
    div > i {
        padding-left: 10px;
        font-size: 1.3rem;
        color: #e3e7ed;
        display: inline-block;
        line-height: 2.5rem;
    }
}
.i1 {
    padding-right: 10px;
    line-height: 42px;
}
.phont_text {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -2px;
}
.phont_text + i {
    padding: 0 10px;
    cursor: pointer;
}

#emit_yzm {
    padding-left: 1rem;
    color: #5dd5c8;
    font-size: 14px;
    border-left: 1px solid #ddd;
}
form input {
    background: transparent;
}
.btn_login {
    width: 100%;
    color: #fff;
    border-color: #5dd5c8;
    background-color: #5dd5c8;
}
.btn_login:hover {
    color: #333;
    border-color: #ddd;
    background-color: #fff;
}
</style>
